<template>
    <el-dialog v-model="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false"
        :close-on-press-escape="false" width="601px">
        <el-form :model="dataForm" :rules="rules" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()"
            label-width="120px">
            <el-form-item prop="name" :label="$t('spices.categoryName')" required>
                <el-input v-model="dataForm.name" :placeholder="$t('input')"></el-input>
            </el-form-item>
            <!-- <el-form-item prop="parentName" :label="$t('food.categoryParentName')" class="dept-list">
                <el-popover :width="400" ref="categoryListPopover" placement="bottom-start" trigger="click"
                    popper-class="popover-pop">
                    <template v-slot:reference>
                        <el-input v-model="dataForm.parentName" :readonly="true" :placeholder="$t('choose')">
                        </el-input></template>
                    <div class="popover-pop-body"><el-tree :data="categoryList"
                            :props="{ label: 'name', children: 'children' }" node-key="id" ref="categoryListTree"
                            :highlight-current="true" :expand-on-click-node="false" accordion
                            @current-change="deptListTreeCurrentChangeHandle"> </el-tree></div>
                </el-popover>
            </el-form-item> -->
            <el-form-item prop="sort" :label="$t('spices.sort')">
                <el-input-number v-model="dataForm.sort" controls-position="right" :min="0"
                    :label="$t('input')"></el-input-number>
            </el-form-item>
        </el-form>
        <template v-slot:footer>
            <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
            <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import baseService from '@/service/baseService';
import { useI18n } from "vue-i18n";
import { IObject } from '@/types/interface';
import { ElMessage } from 'element-plus';

const emit = defineEmits(["refreshDataList"]);
const { t } = useI18n();
const visible = ref(false);
const dataFormRef = ref();
const dataForm = reactive({
    id: "",
    name: "",
    pid: "",
    parentName: "",
    sort: 0,
})
const categoryList = ref([])

const rules = ref({
    name: [{ required: true, message: t("validate.required"), trigger: "blur" }],
});

const init = (id?: number) => {
    visible.value = true;
    dataForm.id = "";
    // 重置表单数据
    if (dataFormRef.value) {
        dataFormRef.value.resetFields();
    }
    if (id) {
        getInfo(id)
    }
}

const getInfo = (id: number) => {
    baseService.get(`edu/diet/condiment/class/${id}`).then((res) => {
        Object.assign(dataForm, res.data)
    })
}

const categoryListPopover = ref()

// 上级部门树, 选中
const deptListTreeCurrentChangeHandle = (data: IObject) => {
    dataForm.pid = data.id;
    dataForm.parentName = data.name;
    categoryListPopover.value.hide();
};

// 表单提交
const dataFormSubmitHandle = () => {
    dataFormRef.value.validate((valid: boolean) => {
        if (!valid) {
            return false;
        }
        baseService.post
            ((!dataForm.id ? '/edu/diet/condiment/class/save' : '/edu/diet/condiment/class/update'), {
                ...dataForm,
            }).then((res) => {
                ElMessage.success({
                    message: t("prompt.success"),
                    duration: 500,
                    onClose: () => {
                        visible.value = false;
                        emit("refreshDataList");
                    }
                });
            });
    });
 }

defineExpose({
    init
})
</script>